<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>CFTagLib - CF Tag Library Planning</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <style type="text/css">
  #g_title p, #g_footer p, #g_description p {
    margin: 0;
  }
  /*

  	-- -- -- -- -- -- --
  	Browser Fixes
  	-- -- -- -- -- -- --
  	
  	This file uses CSS filtering methods to fix various
  	layout bugs.

  	Each of the following three imported files is a 
  	separate, browser-specific CSS file that keeps all 
  	hacks out of the main style sheet.
  	
  	Over time, as supporting these browsers no longer
  	remains a priority, cleaning up the hacks is as
  	easy as deleting the @import statement below, or
  	simply no longer linking this file from the HTML.
  	
  */

  /* 
    fix ie6 "peekaboo bug" using the "holly hack". 
    Note, this style only gets applied to ie6
  */
  * html .wrapper {
    height: 0.1%;
  }

  /* 
   * IE5 mac - overrides the IE/Win hack 
   */

  /*\*//*/

  * html #threecolumn div {
  	height: auto;
  }

  /**/


  /* 
   * IE5/Win-specific CSS -ensures #container wraps all content on window resize
   */

  @media tty {
   i{content:"\";/*" "*/}} * html #container { height: 1%; } /*";}
  }/* */
  /* Styling for editable elements. Eventually, this will be part of the style. */
  .editable {
    border: 1px dashed blue;
  }
  
  #footer {
    clear: both;
  }
  
  /* Extra divs hidden by default. The custom CSS can override this though */
  #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
    display: none;
  }
  
  a img,:link img,:visited img {border: none;}


  /*
    -- -- -- -- -- -- --
    1 Column Layout
    -- -- -- -- -- -- --
  */

  /* Center #container, constrain to 718px width
  ----------------------------------------------- */
  body {
    text-align: center;
  }
  #container {
    width: 718px;
    text-align: left;
    margin: 0 auto;
  }

  #main-content {
    overflow: hidden;
  }

  /** BEGIN CUSTOM SKIN **/
  /* general layout */

  body {
    font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
    font-size: 83%;
    margin: 0em;
    padding: 0em;
    border-top: 1em solid #e2e6ec;
    background: #e2e6ec url(container-fill.gif) center repeat-y;
  }
  body div#container {
    padding: 0em;
    margin-top: 0em;
    border-top: 1px solid #e2e6ec; /* a hack: without it Firefox adds top margin in layouts with sidebar */
    background: url(container-top.gif) top no-repeat;
  }
  div#container div.wrapper {
    padding: 0em;
    margin: 0em;
  }
  div#header {
    padding: 0em 35px;
    padding-top: 2em;
    padding-bottom: 2em;
    _padding-bottom: 1em; /* hack for IE6 */
    margin: 0em;
    margin-top: 2em;
    background: url(header-fill.gif) repeat-y;
  }
  div#header div.wrapper {
    padding: 0em;
    margin: 0em;
  }
  div#main-content {
    line-height: 160%;
    color: #3f3f3f;
    background: url(content-top.gif) top no-repeat;
  }
  div#sidebar,div#sidebar-alternate {
    font-size: 83%;
    line-height: 140%;
    color: #3f3f3f;
    background: url(content-top.gif) top no-repeat;
    padding: 0em;
    margin: 0em;
    padding-top: 1.5em;
  }
  div#footer {
    margin-top: 2em;
    background: url(content-top.gif) top no-repeat;
    padding: 1em 35px;
    color: #7f7f7f;
  }
  div#footer hr { /* I don't like this, but I have no idea why that <hr> is there */
    display: none;
  }

  /* adjusting widths for different layouts */

  body#onecolumn div#main-content {
    padding: 0em 35px;
    width: 648px;
  }
  body#twocolumn-right div#main-content {
    padding: 0em 25px;
    width: 420px;
    margin-left: 10px;
  }
  body#twocolumn-left div#main-content {
    padding: 0em 25px;
    width: 420px;
    margin-right: 8px;
    display: inline;
  }
  body#twocolumn-left div#sidebar {
    padding-left: 15px;
    width: 215px;
  }
  body#twocolumn-right div#sidebar {
    padding-right: 15px;
    width: 215px;
  }
  body#threecolumn div#main-content {
    padding: 0em 25px;
    width: 370px;
  }
  body#threecolumn div#sidebar {
    padding-left: 15px;
    width: 125px;
    margin-left: 10px;
    display: inline;
  }
  body#threecolumn div#sidebar-alternate {
    padding-right: 15px;
    width: 125px;
  }

  /* general styles: headings */

  h1, h2, h3, h4, h5, h6, p.description {
    font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif; 
  }
  h1 {
    font-size: 160%;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 400%; /* for padding below, the above line took away other possibilities */
  }
  h2 {
    font-size: 120%;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 400%; /* for padding below, the above line took away other possibilities */
  }
  h3 {
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    color: black;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 300%; /* for padding below, the above line took away other possibilities */
  }
  h4 {
    font-size: 100%;
    font-weight: bold;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    color: black;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 200%; /* for padding below, the above line took away other possibilities */
  }
  h5 {
    font-size: 100%;
    font-weight: bold;
    color: black;
    display: inline;
  }
  h6 {
    font-size: 100%;
    font-weight: normal;
    color: black;
    display: inline;
  }
  hr {
    background: white;
    height: 1px;
    border: 0em;
    border-top: 1px solid #b3e6e6;
    margin: 1em 0em;
  }

  /* general styles: links */

  a {
    color: #125ebc;
    text-decoration: none;
    border-bottom: 1px solid #125ebc; /* this underline is further away from the text = more legibility */
  }
  a:visited {
    color: #638bbc;
    text-decoration: none;
    border-bottom: 1px solid #638bbc; /* this underline is further away from the text = more legibility */
  }

  /* general styles: lists */

  ul, ol {
    margin-left: 1.8em;
    padding: 0em;
  }
  dt {
    margin-left: 1.8em;
  }
  blockquote {
    margin-left: 1.8em;
  }

  /* general styles: tables */

  table {
    border-collapse: collapse;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: -0.6em;
    margin-right: -0.6em;
  }

  table td,table th {
    padding: 0.3em 0.6em;
    vertical-align: top;
    text-align: left;
  }
  table th {
    border-bottom: 1px solid #b3e6e6;
  }
  table caption {
    text-align: left;
    font-weight: bold;
    color: #4FBBBB;
    padding: 0em;
    _padding: 0em 0.6em; /* hack for IE6: it understands padding differently here */
  }

  /* specific styles */

  h1#page-title {
    font-size: 220%;
    font-weight: normal;
    color: #125ebc;
    letter-spacing: -1px;
    display: block;
    border: 0em;
    padding: 0em;
    margin: 0em;
    line-height: 100%;
  }
  div#g_description {
    font-size: 140%;
    font-weight: normal;
    color: #125ebc; 
  }

  /* correcting horizontal margins for different layouts */

  body#twocolumn-left div#header, body#threecolumn div#header {
    padding-left: 25px;
  }

  /** END CUSTOM SKIN **/
  </style>

  <!-- Hack to avoid flash of unstyled content in IE -->
  

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script> </script>
<link href="style.css" rel="stylesheet">
</head>

<body id="onecolumn">
  <div id="container">
    <div class="wrapper">
      <div id="header">
        <div class="wrapper">
          <h1 id="page-title"><div id='g_title'><p>Installing CfTagLib</p></div></h1>

          <div style="clear: both;"></div>
          <p class="description"><div id='g_description'>&nbsp;</div></p>
          <div style="clear: both"></div>
        </div>
      </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="why.html">&laquo; Previous</a> | <a href="config.html">Next &raquo;</a>
      <!-- /editable --><!-- /wrapper --><!-- /header -->
      <div id="main-content">
        <div class="wrapper">
          <div class="content-item"><div id='g_body'><p></p> 
<h3>Installing CfTagLib</h3> 
<br/>
CfTagLib is no more or less than a bunch of custom tags.  You can install and use them the same way you use other custom tags.  However, since CfTagLib is still in its neonatal stage, it will likely to change significantly over the next year or so.  We don't want you to hesitate to upgrade and worry that the new version would break your existing applications.  So, we advise that you include CfTagLib in each application you are using, and then use <em>cfimport</em> to reference it.  Since CftagLib is a small lightweight library, it shouldn't take up much disk space.
<br/><br>
For example, this is how you should use it:
<br/>
<p class="pre">&lt;cfimport taglib="/appName/taglib/fusebox/" prefix="ui"/&gt;<br/><br/>
&lt;ui:form name="create"&gt;<br>
<span class="tab1">&lt;ui:input name="qryUser.first_nm" label="First Name"/&gt;</span><br>
<span class="tab1">&lt;ui:input name="qryUser.last_nm" label="Last Name" required="true"/&gt;</span><br>
<span class="tab1">&lt;ui:file name="upload_bio"/&gt;</span>
&lt;/ui:form&gt;</p>

This way CfTagLib in each application is independent from each other.
<br/><br/>
<h4>Themes</h4>
<br/>
Our default theme is very flexible and it would meet most of your needs.  In fact we can't imagine a situation where it wouldn't unless the theme you want is non-html like Flash or so.  If that is the case, you can create your own theme.  The location of your theme doesn't have to be web accessible.  It can just be a coldfusion mapping.  In order for the theme to work, you must specify two variables <em>themePath</em> and <em>theme</em> (more info about setting variables for CfTagLib, read <a href="config.html">config file</a>).  For example:
<br/><br/>
request.ui.form.all.config.themePath="/cftaglib/themes/";<br/>
request.ui.form.all.config.theme="simple";
<br/><br/>
This means for an input tag, it would look for a file at <em>/cftaglib/themes/simple/input.cfm</em>.  If it can't find a file there, it will use the default theme.  <em>ThemePath</em> must be a relative address and not the absolute address.
<br/><br/>
<h4>Skins</h4>
<br/>
Our library comes with a variety of skins.  You can specify the skin you want to use with <em>skin</em> variable/attribute.  If you want to create an additional skin, you can specify the CSS files with <em>cssFiles</em> and javascript files with <em>jsFiles</em>.  Of course these <em>cssFiles</em> and <em>jsFiles</em> locations must be web-accessible.  When you specify them as attributes in a tag, you must specify them as lists with commas as the delimiter.  If you specify them as variables in a config file, you have the option to specify them as arrays.  For example:
<br/><br/>
request.ui.form.all.config.cssFiles="/app/includes/css/default.css,/app/includes/css/blue.css";<br/>
or
<br/>
request.ui.form.all.config.cssFiles[1]="/app/includes/css/default.css";<br/>
request.ui.form.all.config.cssFiles[2]="/app/includes/css/blue.css";<br/>

</div></div>

          <div style="clear: both"></div>
        </div>
      </div>
      <!-- /wrapper --><!-- /main-content -->
      <div id="footer"><div class="wrapper">
        <hr /><a href="why.html">&laquo; Previous</a> | <a href="config.html">Next &raquo;</a>
        <p><div id='g_footer'>&nbsp;</div></p>
        <div style="clear: both"></div>
      </div></div>

      <!-- /wrapper --><!-- /footer -->
    </div>
  </div>
<!-- /wrapper --><!-- /container -->

<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div><div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

